<template>
  <div
    style="
      border-radius: 5px;
      width: 98%;
      height: 600%;
      background: white;
      margin-top: 10px;
      margin-left: 40%;
    "
  >
    <div class="handle-box" style="margin-left: -630px; padding: 20px">
      <el-button class="modify" @click="handleDelete(cid)"
        ><Delete style="width: 1em; height: 1em; margin-right: 8px" /> 删除</el-button
      >
      <el-input
        style="margin-left: 20px"
        v-model="selectWord"
        size="medium"
        placeholder="用户名/电影名"
        class="handle-input"
      ></el-input>
      <el-button class="modify" @click="selectComment">点击查询</el-button>
    </div>
    <el-table
      size="mini"
      style="margin-left: -12%; margin-top: 5px; width: 76%; height: 400px"
      :data="data"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名" width="160" align="center"></el-table-column>
      <el-table-column prop="mname" label="电影名" width="160" align="center"></el-table-column>
      <el-table-column prop="addTime" label="评价时间" width="260" align="center"></el-table-column>
      <el-table-column label="评价详情">
        <template #default="scope">
          <p style="height: 70px; width: 300px; overflow: scroll">{{ scope.row.desn }}</p>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog title="删除评论" v-model="delDialogVisible" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span>
        <el-button size="mini" @click="delDialogVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteComment">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const cid = ref('')
const currentPage = ref(1)
function handleCurrentChange(val) {
  currentPage.value = val
}

const delDialogVisible = ref(false)

// 多选
const multipleSelection = ref('')
function handleSelectionChange(val) {
  multipleSelection.value = val
}

const pageSize = ref(5)
const selectWord = ref('')
const tableData = ref([])
const data = computed(() => {
  return tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
})

const tempData = ref([])

function getCommentData() {
  // 这里使用axios获得评论的所有列表赋值给tableData和tempData
  axios
    .get('/api/comment/getAllComment')
    .then((res) => {
      tableData.value = res.data
      tempData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取评论信息失败！')
    })
}

function selectComment() {
  if (selectWord.value === '') {
    tableData.value = tempData.value
  } else {
    tableData.value = []
    for (const item of tempData.value) {
      if (item.mname.includes(selectWord.value) || item.username.includes(selectWord.value)) {
        tableData.value.push(item)
      }
    }
  }
}

const idx = ref('')
function deleteRow() {
  // 使用axios发送删除信息 传参为 idx
  axios
    .get('/api/comment/deleteComment' + '/' + idx.value)
    .then((res) => {
      console.log(res)
      getCommentData()
      ElMessage.success('删除评论信息成功！')
    })
    .catch(() => {
      ElMessage.warning('删除评论信息失败！')
    })
}

function handleDelete(id) {
  idx.value = id
  delDialogVisible.value = true
}

// 删除多选的订单
function deleteComment() {
  for (const item of multipleSelection.value) {
    handleDelete(item.coid)
    deleteRow()
  }
  multipleSelection.value = []
  delDialogVisible.value = false
}

onMounted(() => {
  getCommentData()
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/AdminPhone/phoneAdminComment.scss';
</style>
